<template>
	<el-dialog :title="!falg ? '' : ''" :close-on-click-modal="false" :visible.sync="visible" width="80%"
		custom-class="el-dialog-star" top="3vh">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
			<el-row>
				<h2 style="margin-bottom: 20px">落地页配置</h2>
				<el-button v-show="!falg" type="primary" size="mini" @click="addNewShareList(pageData, -1,flagone)">+
					添加图片模块</el-button>
				<el-button v-show="!falg" type="primary" size="mini" @click="addNewLunboItemD(pageData, -1,flagone)">+
					添加商品模块
				</el-button>
				<el-button v-show="!falg" type="primary" size="mini" @click="addNewLunboItemD2(pageData, -1,flagone)">+
					添加轮播模块
				</el-button>
				<el-button v-show="!falg" type="primary" size="mini" @click="addNewShareList2(pageData, -1,flagone)">+
					添加视频模块
				</el-button>
				<el-button v-show="!falg" type="primary" size="mini" @click="addNewShareList3(pageData,-1,flagone)">+
					添加分享模块</el-button>
			</el-row>
			<div>
				<div>
					<el-progress v-if="videoFlag" type="circle" :percentage="videoUploadPercent" style="
                            margin-left: 40%;
                            margin-bottom: 15%;
                            position: fixed;
                            z-index: 999;
                        "></el-progress>
					<el-divider>
						<i class="el-icon-s-tools"></i>
					</el-divider>
				</div>
				<div v-for="(itemPageData, pageDataindex) in pageData" :key="itemPageData.key">
					<el-form-item class="wheelList" :label="itemPageData.labelName"
						v-if="'pictureList' == itemPageData.type" :porp="itemPageData.type">
						<div class="list">
							<div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'pictureList',
                                }" :key="item.key">
								<img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload :disabled="falg" class="avatar-uploader" :action="action"
										:headers="headers" :show-file-list="false" :on-success="
                                            (res, file, fileList) => {
                                                return uploadShareList(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index,
                                                    item
                                                );
                                            }
                                        " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">*上传图片大小不能超过30M</p>
								</div>

								<div class="content">
									<el-input v-model="item.uri" placeholder="请输入配置跳转路径" size="mini" style="width: 400px"></el-input>
								</div>

								<div v-show="!falg" class="upDownWrapper">
									<el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                            upClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="index !== 0" circle></el-button>
									<el-button icon="el-icon-arrow-down" @click="
                                            downClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="
                                            index !==
                                            itemPageData.data.length - 1
                                        " circle></el-button>
								</div>
							</div>

							<div v-show="!falg" class="upDownWrapper">
								<el-button icon="el-icon-arrow-up" style="border-radius: 30px"
									@click="upClick(pageDataindex)" v-if="pageDataindex !== 0" circle></el-button>
								<el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
									v-if="pageDataindex !== pageData.length - 1" circle></el-button>
							</div>

							<div v-show="!falg" @click="
                                    addNewShareList(pageData, pageDataindex)
                                " class="add-item">
								<img src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>
					<!-- 默认一个-->

					<!-- -->

					<el-form-item class="wheelList" :label="itemPageData.labelName"
						v-if="'goodsMuduleList' == itemPageData.type" :porp="itemPageData.type">
						<div class="list">
							<div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'goodsMuduleList',
                                }" :key="item.key">
								<span class="span">选择商品排列样式</span>
								<div v-for="(
                                        goodsStyleItem, indexs
                                    ) in goodsStyleList" v-dragging="{
                                        item: goodsStyleItem,
                                        list: goodsStyleList,
                                        group: 'goodsStyleList',
                                    }" :key="goodsStyleItem.key">
									<p v-if="goodsStyleItem.picUrl" class="title">
										{{ goodsStyleItem.title }}
									</p>
									<div class="avatar-uploader">
										<img v-if="goodsStyleItem.picUrl" :src="goodsStyleItem.picUrl" class="avatar" />
									</div>
									<p v-if="goodsStyleItem.picUrl" class="tips" style="width: 250px">
										{{goodsStyleItem.advice+" "&nbsp;&nbsp;&nbsp;}}
									</p>
									<input v-model="item.urlType" class="title" type="radio"
										:id="goodsStyleItem.styleType" :value="goodsStyleItem.styleType"
										v-bind:name="itemPageData.labelName" v-on:click="
                                            check_question(
                                                goodsStyleItem.styleType,
                                                item.urlType,
                                                goodsStyleItem.title,
                                                index,
                                                item
                                            )
                                        " :disabled="falg" style="
                                            float: left;
                                            margin-top: 15px;
                                            margin-bottom: 15px;
                                        " />
									<span style="
                                            float: left;
                                            margin-top: 15px;
                                            margin-bottom: 15px;
                                        " v-show="
                                            goodsStyleItem.styleType ==
                                            item.urlType
                                        ">已选择</span>
								</div>

								<el-divider>
									<i class>商品</i>
								</el-divider>
								<img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
								<div class="minitem" v-for="(minitem, indexsl) in item.goodsList" :key="minitem.key"
									v-dragging="{
                                        item: minitem,
                                        list: item.goodsList,
                                        group: 'item.goodsList' + index,
                                    }">
									<!-- <img
                                v-show="!falg"
                                @click="deleteShareListItem(indexs,item.goodsList)"
                                class="close"
                                src="../../assets/img/foodsMan/cancel.png"
                                alt
                                    />-->
									<div>
										<el-upload :disabled="falg" class="avatar-uploader" :action="action"
											:headers="headers" :show-file-list="false" :on-success="
                                                (res, file, fileList) => {
                                                    return uploadGoodsMuduleList(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        indexsl,
                                                        minitem
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="minitem.picUrl" :src="minitem.picUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</div>

									<div class="content">
										<el-select v-model="minitem.skipType" size="mini" placeholder="请选择类型"
											:disabled="falg">
											<el-option v-for="item in options" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<el-select size="mini" v-if="flagone==true&&minitem.skipType == '5'" v-model="minitem.activityId"
											@change="changeactivityId(minitem)" placeholder="请选择预售活动" filterable
											clearable>
											<el-option v-for="(item,i) in activityIdList" :key="i" :value="item.uuid"
												:label="item.activityName"></el-option>
										</el-select>
										<el-select v-if="minitem.skipType == '1' || minitem.skipType == '5'"
											v-model="minitem.goodsId" size="mini" placeholder="请选择商品" filterable
											clearable :disabled="falg" @change="changeGoodsId(minitem)">
											<el-option v-for="item in chooseGoodsList" :key="item.goodsId" :label="
                                                    item.goodsName +
                                                    '(单位：' +
                                                    item.unitName +
                                                    ')'
                                                " :value="item.goodsId"></el-option>
										</el-select>
										<el-select v-if="minitem.skipType == '3'" v-model="minitem.goodsId" size="mini"
											placeholder="请选择兑换赠品" filterable clearable :disabled="falg">
											<el-option v-for="item in chooseGoodsList2" :key="item.uuid" :label="
                                                    item.activityName +
                                                    '(：' +
                                                    item.giftName +
                                                    ')'
                                                " :value="item.uuid"></el-option>
										</el-select>

										<el-select v-if="minitem.skipType == '2'" v-model="minitem.goodsTypeId" @change="
                                                changeType(
                                                    minitem,
                                                    minitem.goodsTypeId
                                                )
                                            " size="mini" placeholder="请选择商品分类" filterable clearable :disabled="falg">
											<el-option v-for="(item, i) in typeData" :key="item.key"
												:label="item.goodsTypeName" :value="item.goodsTypeId"></el-option>
										</el-select>
										<p class="tips">
											*上传图片大小不能超过30M
										</p>

										<div v-show="!falg" class="upDownWrapper">
											<el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                    upClickItem(
                                                        indexsl,
                                                        item.goodsList
                                                    )
                                                " v-if="indexsl !== 0" circle></el-button>
											<el-button icon="el-icon-arrow-down" @click="
                                                    downClickItem(
                                                        indexsl,
                                                        item.goodsList
                                                    )
                                                " v-if="
                                                    indexsl !==
                                                    item.goodsList.length - 1
                                                " circle></el-button>
										</div>
									</div>
								</div>
							</div>
							<div v-show="!falg" class="upDownWrapper">
								<el-button icon="el-icon-arrow-up" style="border-radius: 30px"
									@click="upClick(pageDataindex)" v-if="pageDataindex !== 0" circle></el-button>
								<el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
									v-if="pageDataindex !== pageData.length - 1" circle></el-button>
							</div>

							<div v-show="!falg" @click="
                                    addNewLunboItemD(pageData, pageDataindex)
                                " class="add-item">
								<img src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>

					<el-form-item class="wheelList" :label="itemPageData.labelName" v-if="'adList' == itemPageData.type"
						:porp="itemPageData.type">
						<div class="list">
							<div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'adList',
                                }" :key="item.key">
								<img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
								<div class="minitem" v-for="(minitem, indexs) in item.goodsList" v-dragging="{
                                        item: minitem,
                                        list: item.goodsList,
                                        group: 'minitem',
                                    }" :key="minitem.indexs">
									<img v-show="!falg" @click="
                                            deleteShareListItem(
                                                indexs,
                                                item.goodsList
                                            )
                                        " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
									<div>
										<el-upload :disabled="falg" class="avatar-uploader" :action="action"
											:headers="headers" :show-file-list="false" :on-success="
                                                (res, file, fileList) => {
                                                    return uploadShareList(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        minitem
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
											<img v-if="minitem.picUrl" :src="minitem.picUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
									</div>

									<div class="content">
										<el-select v-model="minitem.skipType" size="mini" placeholder="请选择类型"
											:disabled="falg">
											<el-option v-for="item in options" :key="item.value" :label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
										<!-- <el-select
                         size="mini" 
									 v-if="minitem.skipType == 1"
              v-model="minitem.activityId"
			  @change="changeactivityId(minitem)"
              placeholder="请选择预售活动"
              filterable
              clearable
            >
              <el-option
                v-for="(item,i) in activityIdList"
                :key="i"
                :value="item.uuid"
                :label="item.activityName"
              ></el-option>
                </el-select> -->
										<el-select v-if="minitem.skipType == 1" v-model="minitem.goodsId" size="mini"
											placeholder="请选择商品" filterable clearable :disabled="falg"
											@change="changeGoodsId(minitem)">
											<el-option v-for="item in chooseGoodsList" :key="item.goodsId" :label="
                                                    item.goodsName +
                                                    '(单位：' +
                                                    item.unitName +
                                                    ')'
                                                " :value="item.goodsId"></el-option>
										</el-select>
										<el-select v-if="minitem.skipType == '3'" v-model="minitem.goodsId" size="mini"
											placeholder="请选择兑换赠品" filterable clearable :disabled="falg">
											<el-option v-for="item in chooseGoodsList2" :key="item.uuid" :label="
                                                    item.activityName +
                                                    '(：' +
                                                    item.giftName +
                                                    ')'
                                                " :value="item.uuid"></el-option>
										</el-select>
										<el-select v-if="minitem.skipType == 2" v-model="minitem.goodsTypeId" @change="
                                                changeType(
                                                    minitem,
                                                    minitem.goodsTypeId
                                                )
                                            " size="mini" placeholder="请选择商品分类" filterable clearable :disabled="falg">
											<el-option v-for="(item, i) in typeData" :key="i"
												:label="item.goodsTypeName" :value="item.goodsTypeId"></el-option>
										</el-select>
										<p class="tips">
											*上传图片大小不能超过30M
										</p>

										<div v-show="!falg" class="upDownWrapper">
											<el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                    upClickItem(
                                                        indexs,
                                                        item.goodsList
                                                    )
                                                " v-if="indexs !== 0" circle></el-button>
											<el-button icon="el-icon-arrow-down" @click="
                                                    downClickItem(
                                                        indexs,
                                                        item.goodsList
                                                    )
                                                " v-if="
                                                    indexs !==
                                                    item.goodsList.length - 1
                                                " circle></el-button>
										</div>
									</div>
								</div>
								<el-button v-show="!falg" type="text" size="mini"
									@click="addAdList(index, item.goodsList)">添加
								</el-button>
							</div>

							<div v-show="!falg" class="upDownWrapper">
								<el-button icon="el-icon-arrow-up" style="border-radius: 30px"
									@click="upClick(pageDataindex)" v-if="pageDataindex !== 0" circle></el-button>
								<el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
									v-if="pageDataindex !== pageData.length - 1" circle></el-button>
							</div>

							<div v-show="!falg" @click="
                                    addNewLunboItemD2(pageData, pageDataindex)
                                " class="add-item">
								<img src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>

					<el-form-item class="wheelList" :label="itemPageData.labelName"
						v-if="'videoList' == itemPageData.type" :porp="itemPageData.type">
						<div class="listVideo">
							<div class="itemVideo" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'videoList',
                                }" :key="item.key">
								<img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload :disabled="falg" class="avatar-uploader" :action="action"
										:headers="headers" :show-file-list="false" :on-success="
                                            (res, file, fileList) => {
                                                return uploadvideoList(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index,
                                                    item
                                                );
                                            }
                                        " :before-upload="beforeAvatarUploadVideo" :on-progress="handleProgress">
										<video controls v-if="item.picUrl" :src="item.picUrl" class="avatar"
											:style="styleObject" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">
										*上传视频大小不能超过100M(格式4:3)
									</p>
								</div>

								<div class="contentVideo">
									<div class="flex-row" style="align-items: flex-end">
										<el-upload class="avatar-uploader" :action="action" :headers="headers"
											:show-file-list="false" :on-success="
                                                (res, file, fileList) => {
                                                    return uploadVideoListHaibao(
                                                        res,
                                                        file,
                                                        fileList,
                                                        index,
                                                        item
                                                    );
                                                }
                                            " :before-upload="beforeAvatarUpload" :disabled="falg">
											<img v-if="item.posterUrl" :src="item.posterUrl" class="avatar" />
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
										</el-upload>
										<p class="tips" style="margin-left: 10px">
											注：请上传视频封面图(限30MB)
										</p>
									</div>

									<div v-show="!falg" class="upDownWrapper">
										<el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                                upClickItem(
                                                    index,
                                                    itemPageData.data
                                                )
                                            " v-if="index !== 0" circle></el-button>
										<el-button icon="el-icon-arrow-down" @click="
                                                downClickItem(
                                                    index,
                                                    itemPageData.data
                                                )
                                            " v-if="
                                                index !==
                                                itemPageData.data.length - 1
                                            " circle></el-button>
									</div>
								</div>
							</div>

							<div v-show="!falg" class="upDownWrapper">
								<el-button icon="el-icon-arrow-up" style="border-radius: 30px"
									@click="upClick(pageDataindex)" v-if="pageDataindex !== 0" circle></el-button>
								<el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
									v-if="pageDataindex !== pageData.length - 1" circle></el-button>
							</div>

							<div v-show="!falg" @click="
                                    addNewShareList2(pageData, pageDataindex)
                                " class="add-item">
								<img src="../../assets/img/foodsMan/add.png" alt />
							</div>
						</div>
					</el-form-item>
					<!--  -->
					<el-form-item class="wheelList" :label="itemPageData.labelName"
						v-if="'shareList' == itemPageData.type" :porp="itemPageData.type">
						<div class="list">
							<div class="item" v-for="(item, index) in itemPageData.data" v-dragging="{
                                    item: item,
                                    list: itemPageData.data,
                                    group: 'shareList',
                                }" :key="item.key">
								<img v-show="!falg" @click="
                                        deleteShareListItem(
                                            pageDataindex,
                                            pageData
                                        )
                                    " class="close" src="../../assets/img/foodsMan/cancel.png" alt />
								<div>
									<el-upload :disabled="falg" class="avatar-uploader" :action="action"
										:headers="headers" :show-file-list="false" :on-success="
                                            (res, file, fileList) => {
                                                return uploadShareList(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index,
                                                    item
                                                );
                                            }
                                        " :before-upload="beforeAvatarUpload" :on-progress="handleProgress">
										<img v-if="item.picUrl" :src="item.picUrl" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									<p class="tips">*上传图片大小不能超过30M</p>
								</div>

								<div class="content">
									<el-input v-model="item.uri" type="textarea" autosize size="mini" class="input_edit"
										placeholder="请输入分享描述" maxlength="20" show-word-limit></el-input>
								</div>

								<div v-show="!falg" class="upDownWrapper">
									<el-button icon="el-icon-arrow-up" style="border-radius: 30px" @click="
                                            upClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="index !== 0" circle></el-button>
									<el-button icon="el-icon-arrow-down" @click="
                                            downClickItem(
                                                index,
                                                itemPageData.data
                                            )
                                        " v-if="
                                            index !==
                                            itemPageData.data.length - 1
                                        " circle></el-button>
								</div>
							</div>

							<div v-show="!falg" class="upDownWrapper">
								<el-button icon="el-icon-arrow-up" style="border-radius: 30px"
									@click="upClick(pageDataindex)" v-if="pageDataindex !== 0" circle></el-button>
								<el-button icon="el-icon-arrow-down" @click="downClick(pageDataindex)"
									v-if="pageDataindex !== pageData.length - 1" circle></el-button>
							</div>
						</div>
					</el-form-item>
					<!-- -->
				</div>
			</div>
			<el-row>
				<el-col :span="24" style="text-align: center; margin-top: 30px">
					<el-button size="mini" @click="visible = false">取消</el-button>
					<el-button type="primary" @click="saveForm()" size="mini" v-show="!falg">保 存</el-button>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>
<script>
	import {
		queryStockGoods,
		queryGoodsCategorys
	} from "@/api/compositegoods";
	import {
		getPromotionDeciduousIndexWindow,
		editPromotionDeciduousIndexWindow,
		qryBonuspointConverInfo
	} from "@/api/adSetting";
	import {
		queryPreSaleActList
	} from "@/api/preSaleActivity";
	import qs from "qs";
	let toChinese = function(val) {
		let chin_list = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']; //所有的数值对应的汉字
		let sn = parseInt(val) + 1; //这里由于我的后台是从0开始排序
		if (sn <= 10) {
			return chin_list[sn - 1];
		} else if (sn <= 100) {
			if (sn < 20)
				return '十' + chin_list[sn % 10 - 1];
			if (sn % 10 == 0)
				return chin_list[Math.floor(sn / 10) - 1] + '十';
			else
				return chin_list[Math.floor(sn / 10) - 1] + '十' + chin_list[sn % 10 - 1];
		} else {
			//可以支持更多
		}
	}
	export default {
		data() {
			return {
				action: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
				styleObject: {
					width: '320px',
					'line-height': '180px',
					height: '180px'
				},
				headers: {},
				visible: false,
				chooseGoodsList: [],
				chooseGoodsList2: [],
				options: [{
					label: '商品直购',
					value: '1'
				}, {
					label: '商品分类',
					value: '2'
				}, {
					label: '积分兑换',
					value: '3'
				}, {
					label: '酒红包专区',
					value: '4'
				}, {
					label: '预售活动',
					value: '5'
				}, {
					label: '满赠抽奖',
					value: '6'
				}, {
					label: '现金券抽奖',
					value: '7'
				}],
				typeData: [],
				pageData: [{
						'type': "pictureList",
						'data': [{
							urlType: 0,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1
						}],
						"labelName": "图片模块一"
					}, //图片模块
					{
						'type': "goodsMuduleList",
						'data': [{
							urlType: 0,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1,
							goodsList: []
						}],
						"labelName": "商品模块一"
					}, //商品模块
					{
						'type': "adList",
						'data': [{
							urlType: 0,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1,
							goodsList: []
						}],
						"labelName": "轮播模块一"
					}, //轮播模块
					{
						'type': "videoList",
						'data': [{
							urlType: 0,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1
						}],
						"labelName": "视频模块一"
					}, //视频模块
					{
						'type': "shareList",
						'data': [{
							urlType: 0,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1
						}],
						"labelName": "分享模块一"
					} //分享模块
				],
				flagone: false,
				goodsMuduleList: [], //商品模块
				goodsStyleList: [{
						"title": "样式一",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2Fe1bbfd8c-e4fe-475c-bed5-8cdc41b4a7d2.png",
						"styleType": 1,
						"advice": "建议单张图片尺寸为100*200 "
					},
					{
						"title": "样式二",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F09d966c1-7d4d-4c62-8d6f-486d56cddefc.png",
						"styleType": 2,
						"advice": "建议单张图片尺寸为600*600 "
					},
					{
						"title": "样式三",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F7f76fa8a-09a3-41e2-b0ae-2703d136a628.png",
						"styleType": 3,
						"advice": "建议单张图片尺寸为400*400 "
					},
					{
						"title": "样式四",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F9fc90737-2a47-42dd-b001-29bc8fee35f8.png",
						"styleType": 4,
						"advice": "建议单张图片尺寸为300*300 "
					},
					{
						"title": "样式五",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F81eb8e1a-38ab-4b51-a862-d45ad7e1de19.png",
						"styleType": 5,
						"advice": "建议单张图片尺寸为200*200 "
					},
					{
						"title": "样式六",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2Ffc8b423d-b182-4b10-837c-b702dff0b6c8.png",
						"styleType": 6,
						"advice": "建议单张图片尺寸为200*200 "
					},
					{
						"title": "样式七",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2F41aa373f-cdc1-462f-a6c4-4ddf50524173.png",
						"styleType": 7,
						"advice": "建议单张图片尺寸为100*200 "
					},
					{
						"title": "样式八",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200713%2F863ac859-da07-4203-bdec-8807199dc682.png",
						"styleType": 8,
						"advice": "建议单张图片尺寸为100*200"
					},
					{
						"title": "样式九",
						"picUrl": "https://wuliangye002.obs.cn-south-1.myhuaweicloud.com:443/2020%2F20200709%2F6ce6cc9b-4e03-4194-a8a5-b9b8f03439fc.png",
						"styleType": 9,
						"advice": "建议单张图片尺寸为100*200 "
					}
				],
				//"../../assets/img/goodsStyle/goodsStyle1.png"
				adList: [], //轮播模块
				pictureList: [], //图片模块
				videoList: [], //视频模块
				shareList: [],
				activityIdList: [],
				lunboItem: {
					urlType: 1,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1
					// goodsList: []
				},
				falg: false,
				showNo: "",
				ruleForm: {
					uuid: "",
					type: "",
					data: []
				},
				rules: {},
				videoFlag: false,
				videoUploadPercent: 0
			};
		},
		created() {
			this.headers = {
				token: (localStorage.token || '')
			};
			this.getProductType();
		},
		mounted() {
			// this.falg = this.$route.params.flag;
			// this.showNo = this.$route.params.index;
			this.getUserWhiteList(); //获取当前配置商品信息
			this.getUserWhiteList2(); //获取当前配置商品信息
			this.queryPreSaleActList();
			// this.getPromotionDeciduousIndexWindow();//获取当前配置信息
			this.$dragging.$on('dragged', ({
				value
			}) => {});
		},
		watch: {
			'adList': {
				handler(newName, oldName) {
					// ...
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			queryPreSaleActList() {
				let data = {
					size: "100000",
					current: "1",
					condition: {},
					ascs: [],
					descs: []
				};
				queryPreSaleActList(data).then(res => {
					this.activityIdList = res.records;
					if (res.records.length == 0) {

					} else {
						(this.formInline.activityId = this.activityIdList[0].uuid),
						this.queryPresaleOrderList();
					}

				});
			},

			init(id, falg) {
				console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ id, falg:', id, falg);
				this.showNo = id || 0;
				this.falg = falg || false;
				this.visible = true;
				this.getPromotionDeciduousIndexWindow();
			},
			goback() {
				this.$router.go("-1");
			},
			//获取当前配置商品信息
			getUserWhiteList() {
				let data = {
					size: 99999,
					current: 1,
					condition: {
						isMinUnit: 1,
						status: 1,
						goodsStyle: ""
					},
					ascs: [],
					descs: []
				};
				queryStockGoods(data).then(res => {
					this.chooseGoodsList = res.records;
				});
			},
			//获取当前配置兑换商品信息
			getUserWhiteList2() {
				let data = {
					size: 99999,
					current: 1,
					condition: {},
					ascs: [],
					descs: []
				};
				qryBonuspointConverInfo(data).then(res => {
					this.chooseGoodsList2 = res.result;
				});
			},
			//获取商品分类列表
			getProductType(v) {
				let data = {};
				queryGoodsCategorys(data).then(res => {
					this.typeData = res.records;
					this.typeData.unshift({
						goodsTypeId: "",
						goodsTypeName: "全部"
					});
				});
			},

			//取消
			resetForm() {
				this.getPromotionDeciduousIndexWindow();
				this.$router.push("adSetting");
			},
			//获取当前配置信息
			getPromotionDeciduousIndexWindow() {
				let data = this.showNo;
				getPromotionDeciduousIndexWindow(data).then(res => {
					let jsonstr = res.result.deciduousIndexWindow;
					// let result = qs.parse(jsonstr);
					let result = JSON.parse(jsonstr); // jsonstr是json字符串
					// result = eval('(' + jsonstr + ')'); // jsonstr是json字符串
					if (result != null) {
						this.uuid = res.result.uuid == null ? "" : res.result.uuid;
						this.pageData = result;
						// this.pictureList = result[0].data; // result.pictureList == undefined?[]:result.pictureList;
						// this.goodsMuduleList = result[1].data; // result.goodsMuduleList == undefined?[]:result.goodsMuduleList;
						// this.adList = result[2].data; // result.adList == undefined?[]:result.adList;
						// this.videoList = result[3].data; // result.videoList == undefined?[]:result.videoList;
					} else {
						this.uuid = "";
						this.pageData = [
							// {'type':"pictureList",'data': [{urlType: 0,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",isRelatedActivity:1}],"labelName":"图片模块一"},//图片模块
							// {'type':"goodsMuduleList",'data': [{urlType: 0,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",isRelatedActivity:1,goodsList: []}],"labelName":"商品模块一"},//商品模块
							// {'type':"adList",'data': [{urlType: 0,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",isRelatedActivity:1,goodsList: []}],"labelName":"轮播模块一"},//轮播模块
							// {'type':"videoList",'data': [{urlType: 0,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",isRelatedActivity:1}],"labelName":"视频模块一"}//视频模块
						];
					}
				});
			},
			//保存
			saveForm() {
				// let pictureList = {type: "pictureList",data: this.pictureList};
				// let videoList = {type: "videoList",data: this.videoList};
				// let adList = {type: "adList",data: this.adList};
				// let goodsMuduleList = {type: "goodsMuduleList",data: this.goodsMuduleList};
				// let shuzu =[pictureList,goodsMuduleList,adList,videoList];
				let array = JSON.stringify(this.pageData);
				let data = {
					uuid: this.uuid,
					// deciduousIndexWindow:qs.stringify(data1)
					deciduousIndexWindow: array,
					type: this.showNo
				};
				editPromotionDeciduousIndexWindow(data).then(res => {
					if (res.code == 1) {
						this.$message({
							showClose: true,
							message: res.message,
							type: "success"
						});
						// this.$router.push("adSetting");
						this.visible = false;
					} else {
						this.$message({
							showClose: true,
							message: res.message,
							type: "error"
						});
					}
					this.getPromotionDeciduousIndexWindow();
				});
			},
			//上传尺寸限制
			beforeAvatarUpload(file) {
				let flag = true;
				const filtType = file.type;
				const isLt30M = file.size / 1024 / 1024 / 10 < 3;
				if (filtType != "image/jpeg" && filtType != "image/png" && filtType != "image/jpg" && filtType !=
					"image/gif") {
					this.$message.error("上传图片只能是 JPEG JPG、PNG GIF格式!");
					flag = false;
				}
				if (!isLt30M) {
					this.$message.error("上传图片大小不能超过 30MB!");
					flag = false;
				}
				return flag;
			},
			//上传视频大小限制
			beforeAvatarUploadVideo(file) {
				let flag = true;
				const filtType = file.type;
				const isLt30M = file.size / 1024 / 1024 < 100;
				if (filtType != "video/*" && filtType != "video/mp4") {
					this.$message.error("上传视频只能是 mp4 格式!");
					flag = false;
				}
				//   if (!isLt30M) {
				//     this.$message.error("上传视频大小不能超过 100MB!");
				//     flag = false;
				//   }
				return flag;
			},
			//新增分享配置
			addNewShareList(list, pageDataindex, flagone) {
				let index = 0;
				this.pageData.forEach((item, i) => {
					if (item.type == "pictureList") {
						index++
					}
				});
				let lunboItemD = {
					urlType: 0,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1
				};
				let module = {
					'type': "pictureList",
					'data': [lunboItemD],
					"labelName": "图片模块" + toChinese(index)
				};
				list.splice(pageDataindex + 1, 0, module);
			},
			addNewShareList2(list, pageDataindex, flagone) {
				this.flagone = false
				let index = 0;
				this.pageData.forEach((item, i) => {
					if (item.type == "videoList") {
						index++
					}
				});
				let lunboItemD = {
					urlType: 0,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1
				};
				let module = {
					'type': "videoList",
					'data': [lunboItemD],
					"labelName": "视频模块" + toChinese(index)
				};
				list.splice(pageDataindex + 1, 0, module);
			},
			addNewShareList3(list, pageDataindex, flagone) {
				this.flagone = false

				if (list.some((item, i) => {
						return item.type == "shareList"
					})) {
					this.$message({
						type: "info",
						message: "已存在"
					});
					return
				}
				let module = {
					'type': "shareList",
					'data': [{
						urlType: 0,
						uri: "",
						showNo: 0,
						skipType: "",
						posterUrl: "",
						goodsId: "",
						goodsTypeId: "",
						isRelatedActivity: 1
					}],
					"labelName": "分享模块"
				};
				list.push(module);
			},
			addNewLunboItemD(list, pageDataindex, flagone) {
				this.flagone = true;
				let index = 0;
				this.pageData.forEach((item, i) => {
					if (item.type == "goodsMuduleList") {
						index++
					}
				});
				let lunboItemD = {
					urlType: 0,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1,
					goodsList: []
				};
				let module = {
					'type': "goodsMuduleList",
					'data': [lunboItemD],
					"labelName": "商品模块" + toChinese(index)
				};
				list.splice(pageDataindex + 1, 0, module);
			},
			addNewLunboItemD2(list, pageDataindex, flagone) {
				this.flagone = false
				let index = 0;
				this.pageData.forEach((item, i) => {
					if (item.type == "adList") {
						index++
					}
				});
				let lunboItemD = {
					urlType: 0,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1,
					goodsList: []
				};
				let module = {
					'type': "adList",
					'data': [lunboItemD],
					"labelName": "轮播模块" + toChinese(index)
				};
				list.splice(pageDataindex + 1, 0, module);
			},
			deleteShareListItem(index, list) {
				//删除分享配置;
				this.$confirm("此操作将永久删除该配置, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
					.then(() => {
						this.$message({
							type: "success",
							message: "删除成功!"
						});
						list.splice(index, 1);
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除"
						});
					});
			},
			uploadShareList(res, file, fileList, index, item) {
				// let array = JSON.parse(JSON.stringify(this.pictureList));
				// array[index].picUrl = res.result;
				// this.pictureList = JSON.parse(JSON.stringify(array));
				this.$set(item, "picUrl", res.result);
				this.videoFlag = false;
			},
			uploadvideoList(res, file, fileList, index, item) {
				// let array = JSON.parse(JSON.stringify(this.videoList));
				// array[index].picUrl = res.result;
				// this.videoList = JSON.parse(JSON.stringify(array));
				this.$set(item, "picUrl", res.result);
				this.videoFlag = false;
			},
			uploadVideoListHaibao(res, file, fileList, index, item) {
				// let array = JSON.parse(JSON.stringify(this.videoList));
				// array[index].posterUrl = res.result;
				// this.videoList = JSON.parse(JSON.stringify(array));
				this.$set(item, "posterUrl", res.result);
				this.videoFlag = false;

			},
			// uploadAdList(res, file, fileList, index,indexs) {
			//   this.$set(this.adList[index].goodsList[indexs],"picUrl",res.result);
			// },
			//添加商品区块
			addAdList(index, list) {
				let lunboItemD = {
					urlType: 1,
					uri: "",
					showNo: 0,
					skipType: "",
					posterUrl: "",
					goodsId: "",
					goodsTypeId: "",
					isRelatedActivity: 1,
					picUrl: ""
				};
				list.push(lunboItemD);
			},
			uploadGoodsMuduleList(res, file, fileList, index, indexs, minitem) {
				this.$set(minitem, "picUrl", res.result);
				this.videoFlag = false;
			},
			//添加商品区块
			// addGoodsMuduleList(index,list){
			//   let lunboItemD = {urlType: 1,uri: "",showNo: 0,skipType: "",posterUrl: "",goodsId: "",goodsTypeId: "",picUrl: ""};
			//   this.goodsMuduleList[index].goodsList.push(lunboItemD);
			// },
			check_question(v, l, title, index, list) {
				this.$set(list, "uri", title);
				if (v != l) {
					list.goodsList = [];
				}
				for (let i = 0; i < v; i++) {
					if (v != l) {
						let lunboItemD = {
							urlType: 1,
							uri: "",
							showNo: 0,
							skipType: "",
							posterUrl: "",
							goodsId: "",
							goodsTypeId: "",
							isRelatedActivity: 1,
							picUrl: ""
						};
						list.goodsList.push(lunboItemD);
					} else {
						//
					}
					// arr.push(data[i])
				}
				// this.addGoodsMuduleList(index,list);
			},

			// 上移
			upClick(index) {
				let newArr = this.swapItems(this.pageData, index, index - 1)
				this.pageData = newArr
			},
			// 下移
			downClick(index) {
				let newArr = this.swapItems(this.pageData, index, index + 1)
				this.pageData = newArr
			},
			// 上下移动的核心。
			swapItems(pageData, index1, index2) {
				pageData[index1] = pageData.splice(index2, 1, pageData[index1])[0];
				return pageData;
			},
			changeType(it, val) {
				this.typeData.find((item) => {
					if (item.goodsTypeId === val) { //筛选出匹配数据
						it.isRelatedActivity = item.isRelatedActivity;
					}
				})
			},
			// 上移
			upClickItem(index, list) {
				let newArr = this.swaps(list, index, index - 1)
				list = newArr
			},
			// 下移
			downClickItem(index, list) {
				let newArr = this.swaps(list, index, index + 1)
				list = newArr
			},
			// 上下移动的核心。
			swaps(pageData, index1, index2) {
				pageData[index1] = pageData.splice(index2, 1, pageData[index1])[0];
				return pageData;
			},

			changeGoodsId(item) {
				let goodsId = item.goodsId
				var array = this.chooseGoodsList
				for (let index = 0; index < array.length; index++) {
					const element = array[index].goodsId;
					if (element == goodsId) {
						item.urlType = array[index].goodsStyle
					}
				}
			},
			changeactivityId(item) {
				let activityId = item.uuid;
				var array = this.activityIdList;
				for (let index = 0; index < array.length; index++) {
					const element = array[index].uuid;
					if (element == activityId) {
						item.activityId = array[index].uuid;
					}
				}
			},
			selectChanged(item) {},

			/**     文件正在上传时的钩子    **/
			handleProgress(event, file, fileList) {
				this.videoFlag = true;
				this.videoUploadPercent = Number(file.percentage.toFixed(0));
				console.log(this.videoUploadPercent)
			},



		},
	};
</script>>

<style lang="less" scoped>
	.wheelList .list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .item {
		width: 840px;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		margin: 10px;
	}

	.wheelList .item .avatar-uploader {
		width: 120px;
		height: 120px;
	}

	.wheelList .item .avatar-uploader .avatar {
		width: 120px;
		height: 120px;
	}

	/deep/ .wheelList .item .el-upload {
		width: 120px;
		height: 120px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	.wheelList .item .content {
		margin-left: 20px;
	}

	.wheelList .item .content .avatar-uploader {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	.wheelList .item .content .avatar-uploader .avatar {
		width: 80px;
		height: 80px;
		margin-bottom: 10px;
	}

	/deep/ .wheelList .item .content .el-upload {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .wheelList .item .content .el-input--mini .el-input__inner {
		margin-bottom: 10px !important;
	}

	/deep/ .wheelList .item .content .el-switch {
		margin-bottom: 10px !important;
	}

	.wheelList .listVideo {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .itemVideo {
		width: 840px;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		margin: 10px;
	}

	.wheelList .itemVideo .avatar-uploader {
		width: 320px;
		height: 180px;
	}

	.wheelList .itemVideo .avatar-uploader .avatar {
		width: 320px;
		height: 180px;
	}

	/deep/ .wheelList .itemVideo .el-upload {
		width: 320px;
		height: 180px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-input--mini .el-input__inner {
		margin-bottom: 10px !important;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-switch {
		margin-bottom: 10px !important;
	}

	.wheelList .itemVideo .contentVideo {
		margin-left: 20px;
	}

	.wheelList .itemVideo .contentVideo .avatar-uploader {
		width: 80px;
		height: 80px;
	}

	.wheelList .itemVideo .contentVideo .avatar-uploader .avatar {
		width: 80px;
		height: 80px;
	}

	/deep/ .wheelList .itemVideo .contentVideo .el-upload {
		width: 80px;
		height: 80px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	.add-item {
		width: 100px;
		height: 100px;
		border-radius: 5px;
		border: 1px solid #f2f2f2;
		position: relative;
		background: #ffffff;
		margin-left: 20px;
	}

	.add-item img {
		width: 35px;
		height: 35px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 11;
	}

	.upDownWrapper {
		width: 100px;
		height: 20px;
		border-radius: 5px;
		// border: 1px solid #f2f2f2;
		position: relative;
		// background: #ffffff;
		margin-left: 20px;
	}

	.upDownWrapper .up {
		// class: el-icon-top;
	}

	.upDownWrapper .down {
		// class: el-icon-bottom;
	}

	.upDownWrapper .el-button+.el-button {
		margin-left: 0px;
		margin-right: 10px;
	}

	.wheelList .item .upDownWrapper {
		float: right;
		width: 100px;
		height: 20px;
		border-radius: 5px;
		// border: 1px solid #f2f2f2;
		position: relative;
		// background: #ffffff;
		margin-left: 20px;
	}

	.wheelList .item .upDownWrapper .up {
		class: el-icon-top;
	}

	.wheelList .item .upDownWrapper .down {
		class: el-icon-bottom;
	}

	.wheelList .item .upDownWrapper .el-button+.el-button {
		margin-left: 0px;
		margin-right: 10px;
	}

	.tips {
		width: max-content;
		font-size: 12px;
		line-height: normal;
		color: red;
		margin-top: 5px;
	}

	.title {
		margin-left: 40px;
	}

	.close {
		width: 30px;
		height: 30px;
		padding: 10px;
		box-sizing: border-box;
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 11;
	}

	.wheelList .list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.wheelList .item .minitem {
		width: 350px;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
		display: flex;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		margin: 10px;
	}

	.wheelList .item .minitem .avatar-uploader {
		width: 120px;
		height: 120px;
	}

	.wheelList .item .minitem .avatar-uploader .avatar {
		width: 120px;
		height: 120px;
	}

	/deep/ .wheelList .item .minitem .el-upload {
		width: 120px;
		height: 120px;
		position: relative;
		border: 1px solid #f2f2f2;
		border-radius: 5px;
	}

	.wheelList .item .minitem .content {
		margin-left: 0px;
	}

	.wheelList .item .span {
		width: 840px;
		margin-bottom: 20px;
		background-color: "";
		display: -moz-inline-box;
		display: inline-block;
	}

	.el-dialog-star {
		min-width: 800px;
		width: 80% !important;
	}

	.el-dialog-star .el-dialog__header {
		background: #f5f7fa;
		padding: 15px 20px;
	}

	.el-dialog-star .el-dialog__body {
		padding: 10px 20px 20px;
	}
</style>
